<template>
    <div class="companyBusCss">
        <div style="display: flex;">
            <!-- style="width: 500px;height: 24px ;align-content: center;padding-top: 300px;" -->
            <div style="text-align: left;padding-left: 291px;padding-top: 60px;width: 100%;">公司业务</div>
        </div>
        <div style="padding-left: 180px; padding-top: 35px;width: 89%; ">
            <div style="display: flex; ">

                <el-menu default-active="2" style="width: 300px;height: 700px; ">
                    <div >

                            <div style="margin-bottom: 10px;background-color: #013a7d;">
                                <el-submenu-item index="1" >
                                    <el-link @click="show('personResource')" style="color: #fff;">
                                        人力资源规划
                                    </el-link>
                                </el-submenu-item>
                            </div>


                            <div style="margin-bottom: 10px;background-color: #013a7d;">
                                <el-submenu-item index="2" >
                                    <el-link @click="show('businessTraining')" style="color: #fff;">
                                        企业培训
                                    </el-link>
                                </el-submenu-item>
                            </div>


                            <div style="margin-bottom: 10px;background-color: #013a7d;">
                                <el-submenu-item index="4" >
                                    <el-link @click="show('businessTraining')" style="color: #fff;">
                                        外资在华事务所代理
                                    </el-link>
                                </el-submenu-item>
                            </div>

                        </div>
                </el-menu>
                <!-- <div style="width: 300px;height: 700px;" >
                    <div>
                        <el-link  @click="show('personResource')" >
                            人力资源规划
                        </el-link>
                    </div>
                    <div>
                        <el-link  @click="show('businessTraining')">
                            企业培训
                        </el-link>
                    </div>
                </div> -->
                <!-- <a >
                    外资在华事务所代理
                </a> -->
                <div style=" width: calc(100% - 120px); padding-left: 150px;">

                    <keep-alive>
                        <!-- 占位符 控制显示的东西，必须加is 不然会报错 -->
                        <component :is="isshow"></component>
                    </keep-alive>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
// E:\vueProject\v-model\src\views\masterRightAside\personResource.vue
import personResource from '../views/masterRightAside/personResource.vue'
import businessTraining from '../views/masterRightAside/businessTraining.vue'
export default {
    name: 'companyBusiness',
    components: {
        personResource,
        businessTraining
    },
    data() {
        return {
            isshow: 'personResource'
        }
    },
    methods: {

        show(name) {
            debugger
            this.isshow = name
        }
    }
}
</script>

<style scoped>
.companyBusCss {
    height: 960px;
    width: 89%;
    padding: 80px;
    /* display: flex; */
}
</style>